<!-- 闹钟列表页 -->
<template>
	<view class="alarm-container">

		<!-- 添加闹钟按钮 onAddAlarm -->
		<button class="add-alarm-btn" @click="onConnect">
			绑定闹钟
		</button>
		<!-- <button class="bind-button" @click="onConnect">
			连接设备
		</button> -->

		<!-- 输入WIFI信息弹框 -->
		<view v-if="showWiFiPopup" class="name-edit-popup">
			<view class="name-edit-popup-content">
				<view class="popup-title">配置设备Wi-Fi</view>
				<text>请输入正确的WIFI信息：</text>
				<input class="name-input" v-model="wifiSSID" placeholder="请输入Wi-Fi名称(SSID)" />
				<input class="name-input" v-model="wifiPassword" placeholder="请输入Wi-Fi密码" />
				<view class="popup-actions">
					<button @click="onCancelWiFiConfig">取消</button>
					<button @click="onConfirmWiFiConfig">确定</button>
				</view>
			</view>
		</view>

		<!-- 搜索条 -->
		<!-- <view class="search-bar">
			<input type="text" placeholder="搜索闹钟名称" v-model="searchQuery" @input="onSearch" class="search-input" />
		</view> -->

		<!-- 闹钟列表 -->
		<!-- <view class="alarm-list">
			<view v-for="(alarm, index) in alarmList" :key="alarm.id" class="alarm-item">
				<view class="alarm-content">
					<view class="alarm-name">{{ alarm.clockName }}</view>
					<view class="alarm-actions">
						<text class="detail-text" @click="onViewDetail(alarm)">
							详情
						</text>
						<text class="delete-text" @click="onDeleteAlarm(index)">
							删除
						</text>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 下方分为左右两部分 -->
		<view class="content">
			<!-- 左侧灰色垂直条 -->
			<view class="left-sidebar">
				<image src="/static/images/gray-bar.png" class="gray-bar-image"></image>
			</view>

			<!-- 右侧闹钟图标区域 -->
			<view class="right-content">
				<!-- 闹钟图标网格 -->
				<scroll-view class="alarm-grid" scroll-y="true">
					<view class="grid-container">
						<view v-for="(slot, index) in alarmSlots" :key="index" class="grid-item">
							<!-- 如果有闹钟绑定，显示闹钟图标及信息 -->
							<AlarmIcon v-if="slot" :alarm="slot" @delete="onDeleteAlarm(slot)"
								@click="onAlarmClick(slot)" />
							<!-- 如果没有闹钟绑定，显示空白图标或占位符 -->
							<view v-else class="empty-slot" @click="onEmptySlotClick">
								<image src="/static/images/clock.png" class="empty-icon"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getClockList,
		addClock,
		editClock,
		lightSwitch,
		hourlyBroadcastSwitch,
		colorSetting,
		brightnessSetting,
		setAlarmTime,
		delClock
	} from '@/src/api/clock.js'
	import {
		SERVICE_ID,
		CHARACTERISTIC_ID,
		RESPONSE_CHARACTERISTIC_ID
	} from '@/src/config.js'
	import AlarmIcon from '@/pages/alarm/AlarmIcon.vue' // 确保路径正确

	export default {
		components: {
			AlarmIcon
		},
		data() {
			return {
				openid: getApp().globalData.openid || uni.getStorageSync("openid"),
				alarmList: [], // 实际绑定的闹钟列表
				alarmSlots: Array(12).fill(null), // 固定12个槽位
				searchQuery: '', // 搜索关键词
				displayedAlarmSlots: Array(12).fill(null), // 显示的槽位，根据搜索过滤
				timer: null, // 定时器引用

				// BLE设备
				showBLEDevicesPopup: false,
				bleDevices: [],
				deviceSearchTimeout: null,
				wifiConfigTimeout: null, // Wi-Fi 配置超时

				// Wi-Fi配置
				showWiFiPopup: false,
				wifiSSID: '',
				wifiPassword: '',

				// 蓝牙信息
				deviceId: '',
				serviceId: `${SERVICE_ID}`,
				characteristicId: `${CHARACTERISTIC_ID}`,
				responseCharacteristicId: `${RESPONSE_CHARACTERISTIC_ID}`
			}
		},
		async onLoad() {
			// 页面加载时获取已绑定的闹钟列表
			await this.fetchAlarmList()
			// 启动定时器，每5秒更新一次闹钟状态
			this.startTimer()
		},
		onUnload() {
			// 页面卸载时清除定时器
			this.stopTimer()
		},
		methods: {
			// 获取已绑定的闹钟列表
			async fetchAlarmList() {
				try {
					const clockListResponse = await getClockList(this.openid)
					console.log("闹钟列表： ", clockListResponse)
					this.alarmList = clockListResponse.data
					this.populateAlarmSlots()
				} catch (error) {
					console.error("获取闹钟列表失败：", error)
					uni.showToast({
						title: '获取闹钟列表失败',
						icon: 'none'
					})
				}
			},
			/* ========== 二维码扫描连接 ========== */
			async onScanQRCodeConnect() {
				// 微信小程序: wx.scanCode / uni.scanCode
				uni.scanCode({
					onlyFromCamera: true, // 可选
					success: async (res) => {
						console.log('扫码结果:', res);
						// 假设二维码里包含 deviceId
						// 也可能是 JSON 或 URL，需要你解析
						const deviceId = res.result
						// 弹框或直接发后端
						this.alarmName = ''
						this.deviceCode = deviceId
						// 这里也可直接 addClock 绑定
						// 也可跟手动一样，先让用户输入一个闹钟名称
						uni.showModal({
							title: '扫描成功',
							content: `已获取设备ID:${deviceId}, 是否绑定？`,
							success: async (modalRes) => {
								if (modalRes.confirm) {
									try {
										await this.bindDevice(deviceId, `闹钟${deviceId}`, 2)
										uni.showToast({
											title: '绑定成功',
											icon: 'success'
										})
									} catch (e) {
										uni.showToast({
											title: e.message || '绑定失败',
											icon: 'none'
										})
									}
								}
							}
						})
					},
					fail: (err) => {
						console.error('扫描失败:', err)
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						})
					}
				})
			},
			// 删除闹钟
			async onDeleteAlarm(alarm) {
				uni.showModal({
					title: '提示',
					content: `确认要删除【${alarm.clockName}】吗？`,
					success: async (res) => {
						if (res.confirm) {
							try {
								await delClock(alarm.id)
								// 从alarmList中移除
								const alarmIndex = this.alarmList.findIndex(a => a.id === alarm.id)
								if (alarmIndex !== -1) {
									this.alarmList.splice(alarmIndex, 1)
								}
								// 更新槽位
								this.populateAlarmSlots()
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})
							} catch (error) {
								console.error("删除闹钟失败：", error)
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								})
							}
						}
					}
				})
			},
			// 查看闹钟详情或提示
			onAlarmClick(alarm) {
				if (alarm.onLineState === 1) {
					// 跳转到详情页
					uni.navigateTo({
						url: `/pages/deviceDetail/deviceDetail?alarmId=${alarm.id}`
					})
				} else {
					// 提示闹钟离线
					uni.showToast({
						title: '当前闹钟不在线请稍后再试',
						icon: 'none'
					})
				}
			},
			// 点击空白槽位提示未绑定
			onEmptySlotClick() {
				uni.showToast({
					title: '当前未绑定闹钟请添加闹钟',
					icon: 'none'
				})
			},
			// 搜索闹钟
			onSearch() {
				this.populateDisplayedAlarmSlots()
			},
			// 填充显示的槽位，根据搜索关键词
			populateDisplayedAlarmSlots() {
				// 根据搜索关键词过滤alarmList
				let filteredAlarms = this.alarmList
				if (this.searchQuery.trim() !== '') {
					const query = this.searchQuery.trim().toLowerCase()
					filteredAlarms = this.alarmList.filter(alarm =>
						alarm.clockName.toLowerCase().includes(query)
					)
				}
				// 填充槽位
				this.alarmSlots = Array(12).fill(null)
				filteredAlarms.forEach((alarm, index) => {
					if (index < 12) {
						this.$set(this.alarmSlots, index, alarm)
					}
				})
			},
			// 填充槽位调用
			populateAlarmSlots() {
				// 调用populateDisplayedAlarmSlots以支持搜索
				this.populateDisplayedAlarmSlots()
			},
			// 定时器开始
			startTimer() {
				this.timer = setInterval(async () => {
					try {
						const clockListResponse = await getClockList(this.openid)
						this.alarmList = clockListResponse.data
						this.populateAlarmSlots()
					} catch (error) {
						console.error("定时获取闹钟列表失败：", error)
					}
				}, 5000) // 每5秒
			},
			// 定时器停止
			stopTimer() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
			},

			// 点击“添加闹钟”
			onAddAlarm() {
				// 示例：跳转到绑定设备页面
				uni.navigateTo({
					url: '/pages/deviceBind/deviceBind'
					// url: '/pages/deviceBind/deviceBind2'
				})
			},
			/* ========== 统一连接流程 ========== */
			async onConnect() {
				try {
					// 请求相机权限
					const cameraAuth = await this.requestCameraPermission()
					if (!cameraAuth) {
						uni.showToast({
							title: '相机权限被拒绝',
							icon: 'none'
						})
						return
					}

					// 扫描二维码获取 deviceId
					const scannedDeviceId = await this.scanQRCode()
					if (!scannedDeviceId) {
						uni.showToast({
							title: '未获取到设备ID',
							icon: 'none'
						})
						return
					}

					// 显示系统加载中
					uni.showLoading({
						title: '加载中...',
						mask: true
					})

					// 请求蓝牙权限并初始化蓝牙适配器
					const bluetoothAuth = await this.requestBluetoothPermission()
					if (!bluetoothAuth) {
						uni.showToast({
							title: '蓝牙权限被拒绝',
							icon: 'none'
						})
						uni.hideLoading()
						return
					}

					// 开始搜索蓝牙设备
					await this.startBLEDiscovery()

					// 等待设备被发现并匹配
					const device = await this.findBLEDevice(scannedDeviceId)
					if (!device) {
						// uni.hideLoading()
						uni.showToast({
							title: '未找到匹配的蓝牙设备',
							icon: 'none',
							duration: 3000
						})
						this.onCancelBLEList() // 清理操作
						return
					}

					// 连接到匹配的蓝牙设备
					await this.connectToDevice(device.deviceId)

					// 隐藏加载中
					uni.hideLoading()

					// 显示 Wi-Fi 配置弹框
					this.showWiFiPopup = true

				} catch (error) {
					console.error('连接流程出错:', error)
					uni.showToast({
						title: error.message || '连接失败',
						icon: 'none'
					})
					uni.hideLoading()
				}
			},

			// 扫描二维码
			scanQRCode() {
				return new Promise((resolve, reject) => {
					uni.scanCode({
						onlyFromCamera: true,
						success: (res) => {
							console.log('扫码结果:', res)
							const deviceId = res.result // 根据实际情况解析
							// const deviceId = '24:EC:4A:02:A0:0E'
							resolve(deviceId)
						},
						fail: (err) => {
							console.error('扫描失败:', err)
							resolve(null)
						}
					})
				})
			},

			// 请求相机权限
			requestCameraPermission() {
				return new Promise((resolve, reject) => {
					uni.authorize({
						scope: 'scope.camera',
						success: () => resolve(true),
						fail: () => resolve(false)
					})
				})
			},

			// 请求蓝牙权限并初始化蓝牙适配器
			requestBluetoothPermission() {
				return new Promise((resolve, reject) => {
					uni.openBluetoothAdapter({
						success: () => {
							console.log('蓝牙适配器初始化成功')
							resolve(true)
						},
						fail: (err) => {
							console.error('openBluetoothAdapter失败:', err)
							resolve(false)
						}
					})
				})
			},

			// 开始搜索附近蓝牙设备
			startBLEDiscovery() {
				return new Promise((resolve, reject) => {
					this.bleDevices = []
					uni.startBluetoothDevicesDiscovery({
						allowDuplicatesKey: false,
						success: (res) => {
							console.log('开始搜索蓝牙设备...', res)
							uni.onBluetoothDeviceFound(this.onBLEDeviceFound.bind(this))

							// 设置搜索超时（例如5秒）
							this.deviceSearchTimeout = setTimeout(() => {
								if (this.bleDevices.length === 0) {
									uni.showModal({
										title: '提示',
										content: '未搜索到设备，请确认已打开蓝牙和定位',
										showCancel: false
									})
								}
								resolve()
							}, 5000)
						},
						fail: (err) => {
							console.error('搜索蓝牙设备失败', err)
							reject(new Error('搜索蓝牙设备失败'))
						}
					})
				})
			},

			// 处理发现的蓝牙设备
			onBLEDeviceFound(deviceRes) {
				let devs = deviceRes.devices || []
				devs.forEach(d => {
					if (!d.deviceId) return
					if (!this.bleDevices.find(x => x.deviceId === d.deviceId)) {
						d.name = d.name || d.localName || '未知设备'
						this.bleDevices.push(d)
					}
				})
			},

			// 查找匹配的蓝牙设备
			findBLEDevice(scannedDeviceId) {
				return new Promise((resolve, reject) => {
					const checkDevice = () => {
						const device = this.bleDevices.find(d => d.deviceId === scannedDeviceId)
						if (device) {
							resolve(device)
						} else {
							resolve(null)
						}
					}

					// 立即检查
					checkDevice()

					// 5秒后再次检查
					setTimeout(() => {
						checkDevice()
					}, 5000)
				})
			},

			// 连接到指定的蓝牙设备
			connectToDevice(deviceId) {
				return new Promise((resolve, reject) => {
					uni.createBLEConnection({
						deviceId: deviceId,
						success: (connRes) => {
							console.log('蓝牙连接成功 =>', connRes)
							this.deviceId = deviceId
							// 设置蓝牙最大传输单元  需在 uni.createBLEConnection调用成功后调用，mtu 设置范围 (22,512)。安卓5.1以上有效。
							uni.setBLEMTU({
								deviceId: this.deviceId,
								mtu: 512
							});
							// 启用通知
							this.enableBLENotifications(this.deviceId, this.serviceId, this
								.responseCharacteristicId)
							console.log('已启用通知')

							resolve(true)
						},
						fail: (err) => {
							console.error('蓝牙连接失败', err)
							reject(new Error('蓝牙连接失败'))
						}
					})
				})
			},

			// 启用特征值的通知
			enableBLENotifications(deviceId, serviceId, characteristicId) {
				return new Promise((resolve, reject) => {
					uni.notifyBLECharacteristicValueChange({
						deviceId: deviceId,
						serviceId: serviceId,
						characteristicId: characteristicId,
						state: true, // 启用通知
						success: () => {
							// 监听特征值变化
							uni.onBLECharacteristicValueChange(this.handleBLECharacteristicValueChange
								.bind(this))
							resolve(true)
						},
						fail: (err) => {
							console.error('启用通知失败:', err)
							reject(new Error('启用通知失败'))
						}
					})
				})
			},

			// 处理蓝牙特征值变化
			onBLECharacteristicValueChange(res) {
				const characteristicValue = res.value;
				const wifiInfoResponse = this.arrayBufferToString(characteristicValue);
				console.log('接收到设备响应的WIFI信息:', wifiInfoResponse);

				// 根据设备响应的内容进行处理
				if (wifiInfoResponse === 'success') {
					uni.showToast({
						title: 'Wi-Fi配置成功',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: 'Wi-Fi配置失败',
						icon: 'none'
					});
				}
			},

			// 处理接收到的特征值变化
			handleBLECharacteristicValueChange(res) {
				console.log('接收到的响应数据:', res)
				if (res.deviceId !== this.deviceId) return
				if (res.serviceId !== this.serviceId) return
				if (res.characteristicId !== this.responseCharacteristicId) return

				// 将 ArrayBuffer 转换为字符串
				const receivedStr = this.arrayBufferToString(res.value)
				console.log('接收到的响应数据:', receivedStr)

				// 根据响应内容执行相应的逻辑
				// 假设设备返回 "success" 或 "failure"
				if (receivedStr.includes('success')) { // 响应成功
					// uni.showToast({
					// 	title: '设备 Wi-Fi 连接成功',
					// 	icon: 'success'
					// })
					this.showWiFiPopup = false
					// 绑定设备到后端
					this.bindDevice(this.deviceId, `闹钟${this.deviceId}`, 1)

					// 断开蓝牙连接
					this.disconnectBluetooth()

				} else { // 响应失败
					uni.showToast({
						title: 'Wi-Fi 信息有误，请重新输入',
						icon: 'none'
					})
				}

				// 可以根据需要，取消通知监听
				// uni.offBLECharacteristicValueChange(this.handleBLECharacteristicValueChange.bind(this))

				// 清理超时
				if (this.wifiConfigTimeout) {
					clearTimeout(this.wifiConfigTimeout)
					this.wifiConfigTimeout = null
				}

			},

			// 取消蓝牙设备列表弹框
			onCancelBLEList() {
				this.showBLEDevicesPopup = false
				uni.stopBluetoothDevicesDiscovery()
				uni.offBluetoothDeviceFound(this.onBLEDeviceFound)
				uni.offBLECharacteristicValueChange(this.handleBLECharacteristicValueChange) // 移除通知监听
				if (this.deviceSearchTimeout) {
					clearTimeout(this.deviceSearchTimeout)
				}
				if (this.wifiConfigTimeout) {
					clearTimeout(this.wifiConfigTimeout)
				}
				uni.closeBluetoothAdapter({
					success(res) {
						console.log("关闭蓝牙适配器：", res)
					}
				})
			},

			/* ========== Wi-Fi 配置相关方法 ========== */

			// 取消Wi-Fi配置
			onCancelWiFiConfig() {
				this.showWiFiPopup = false
				this.disconnectBluetooth()
			},

			// 确认Wi-Fi配置
			async onConfirmWiFiConfig() {
				try {
					const {
						wifiSSID,
						wifiPassword,
						deviceId,
						serviceId,
						characteristicId
					} = this

					if (!wifiSSID || !wifiPassword) {
						uni.showToast({
							title: '请填写完整的Wi-Fi信息',
							icon: 'none'
						})
						return
					}

					const sendStr = `ssid=${wifiSSID};pwd=${wifiPassword}`
					const buffer = this.stringToArrayBuffer(sendStr)

					console.log('设备信息 =>', deviceId, serviceId, characteristicId, buffer)
					await this.writeBLECharacteristicValue(deviceId, serviceId, characteristicId, buffer)

					// 显示加载中，等待设备响应
					uni.showLoading({
						title: '配置中...',
						mask: true
					})

					// 设置一个超时机制，如果设备在一定时间内未响应
					this.wifiConfigTimeout = setTimeout(() => {
						uni.hideLoading()
						uni.showToast({
							title: '设备未响应，请重试',
							icon: 'none'
						})
						this.showWiFiPopup = true
						// this.disconnectBluetooth()
					}, 10000) // 10秒超时

				} catch (error) {
					console.error('配置Wi-Fi失败:', error)
					uni.showToast({
						title: error.message || '配置Wi-Fi失败',
						icon: 'none'
					})
				} finally {
					// this.showWiFiPopup = false
					// this.wifiSSID = ''
					// this.wifiPassword = ''
					// this.disconnectBluetooth()
				}
			},

			// 写入蓝牙特征值
			writeBLECharacteristicValue(deviceId, serviceId, characteristicId, buffer) {
				return new Promise((resolve, reject) => {
					uni.writeBLECharacteristicValue({
						deviceId: deviceId,
						serviceId: serviceId,
						characteristicId: characteristicId,
						value: buffer,
						writeType: 'writeNoResponse',
						success: (res) => {
							console.log('写入 WiFi 成功 =>', res)
							resolve(res)
						},
						fail: (err) => {
							console.error('写入WiFi失败 =>', err)
							reject(new Error('写入WiFi失败'))
						}
					})
				})
			},

			// 断开蓝牙连接
			disconnectBluetooth() {
				if (this.deviceId) {
					uni.closeBLEConnection({
						deviceId: this.deviceId,
						success: (res) => {
							console.log("断开蓝牙连接：", res)
							this.deviceId = ''
						},
						fail: (err) => {
							console.error("断开蓝牙连接失败：", err)
						}
					})
				}
			},

			// 字符串转ArrayBuffer
			stringToArrayBuffer(str) {
				const buffer = new ArrayBuffer(str.length);
				const dataView = new DataView(buffer);
				for (let i = 0; i < str.length; i++) {
					dataView.setUint8(i, str.charCodeAt(i));
				}
				return buffer;
			},

			// 将 ArrayBuffer 转换为字符串
			arrayBufferToString(buffer) {
				const bytes = new Uint8Array(buffer);
				let binary = '';
				for (let i = 0; i < bytes.byteLength; i++) {
					binary += String.fromCharCode(bytes[i]);
				}
				try {
					// 尝试将二进制字符串转换为UTF-8编码的字符串
					return decodeURIComponent(escape(binary));
				} catch (e) {
					// 如果转换失败，返回原始二进制字符串
					return binary;
				}
			},

			// 绑定设备到后端
			async bindDevice(deviceId, alarmName, bindSource) {
				let paramObj = {
					openId: this.openid,
					deviceId,
					clockName: alarmName,
					bindSource
				}
				const res = await addClock(paramObj)
				console.log('bindDevice =>', res)
				if (res.status == 200) {
					uni.showToast({
						title: '绑定成功',
						icon: 'success',
						duration: 3000
					})
				} else {
					uni.showToast({
						title: res.message || '绑定失败',
						icon: 'none'
					})
					throw new Error(res.message)
				}
			}
		},
		beforeDestroy() {
			// 清理所有蓝牙监听
			uni.offBluetoothDeviceFound(this.onBLEDeviceFound)
			uni.offBLEConnectionStateChange()
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 适应整个屏幕高度 */
		background-color: #ffffff;
	}

	/* 添加闹钟按钮 */
	.add-alarm-btn {
		background-color: #07C160;
		color: #fff;
		padding: 10px 20px;
		border-radius: 8px;
		margin: 20px;
		font-size: 16px;
		align-self: center;
	}

	/* 搜索条 */
	.search-bar {
		display: flex;
		justify-content: center;
		margin-bottom: 10px;
	}

	.search-input {
		width: 90%;
		padding: 8px 12px;
		border: 1px solid #ccc;
		border-radius: 8px;
		font-size: 14px;
	}

	/* 下方分为左右两部分 */
	.content {
		flex: 1;
		display: flex;
	}

	/* 左侧灰色垂直条 */
	.left-sidebar {
		width: 20%;
		/* 左侧1/5 */
		background-color: #f0f0f0;
		/* 灰色背景 */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.gray-bar-image {
		width: 30px;
		/* 根据实际需要调整 */
		height: 150px;
		/* 根据实际需要调整 */
		object-fit: contain;
	}

	/* 右侧闹钟图标区域 */
	.right-content {
		width: 80%;
		/* 右侧4/5 */
		padding: 10px 20px;
		display: flex;
		flex-direction: column;
	}

	/* 闹钟图标网格 */
	.alarm-grid {
		flex: 1;
		overflow-y: auto;
	}

	/* 容器内的网格布局 */
	.grid-container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	/* 每个闹钟图标槽 */
	.grid-item {
		width: calc(25% - 10px);
		/* 四列，初始显示8个 */
		position: relative;
	}

	/* 空白槽位 */
	.empty-slot {
		background-color: #f9f9f9;
		border: 2px dashed #ccc;
		border-radius: 8px;
		height: 150px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.empty-icon {
		width: 40px;
		height: 40px;
		object-fit: contain;
	}

	/* 调整AlarmIcon的grid-item宽度以四列布局 */
	@media (max-width: 768px) {
		.grid-item {
			width: calc(50% - 10px);
			/* 三列布局适应小屏幕 */
		}
	}

	/* 弹框公共样式 */
	.name-edit-popup {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}

	.name-edit-popup-content {
		background: #fff;
		width: 80%;
		max-width: 400px;
		padding: 20px;
		border-radius: 6px;
		box-sizing: border-box;
	}

	.name-input {
		width: 100%;
		height: 40px;
		padding: 5px 10px;
		border: 1px solid #ccc;
		box-sizing: border-box;
		margin-bottom: 15px;
	}

	.popup-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.popup-actions {
		display: flex;
		justify-content: flex-end;
		gap: 15px;
	}
</style>